<template>
  <div class="Q-input" :class="{ 'Q-input__suffix': showIcon }">
    <input
      :type="inputType"
      class="Q-input__inner"
      :class="{ 'is-disabled': disabled }"
      :placeholder="placeholder"
      :name="name"
      :disabled="disabled"
      :value="value"
      @input="_handleInput"
    />
    <span class="Q-input__suffix">
      <i
        class="Q-icon-guanbi"
        v-if="clearable && value && type !== 'password'"
        @click="clearInput"
        >1</i
      >
      <i
        class="Q-icon-yanjing"
        :class="{ 'password-icon-active': passwordVisible }"
        v-if="showPassword && type == 'password'"
        @click="handlePassword"
        >2</i
      >
    </span>
  </div>
</template>

<script>
/**
 * type:
 *
 *
 * @provideGoog
 */
/**
 *
 * @description
 * @property {String}        type             支持传入原生属性，如color，text，number，file，date，range拖动条，email，
 *
 *
 * @event    {Function}       cancel          关闭弹窗触发，当前组件为右上角x号
 */
export default {
  name: "QInput",
  props: {
    placeholder: {
      type: String,
      default: "",
    },
    type: {
      type: String,
      default: "text",
    },
    name: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    value: {
      type: String,
      default: "",
    },
    clearable: {
      type: Boolean,
      default: false,
    },
    showPassword: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      passwordVisible: false,
    };
  },
  computed: {
    showIcon() {
      return this.clearable || this.showPassword;
    },
    inputType() {
      if (this.type === "number") {
        return 'number';
      } else {
        return this.showPassword
          ? this.passwordVisible
            ? "text"
            : "password"
          : this.type;
      }
    },
  },
  methods: {
    _handleInput(e) {
      this.$emit("input", e.target.value);
    },
    clearInput() {
      this.$emit("input", "");
    },
    handlePassword() {
      this.passwordVisible = !this.passwordVisible;
    },
    // 数字禁止输入e,      <!-- @keydown.native="channelInputLimit" -->
    // channelInputLimit(e) {
    //   console.log(e, 322222);
    //   const key = e.key;
    //   if (key === "e") {
    //     e.returnValue = false;
    //     return false;
    //   }
    //   return true;
    // },
  },
};
</script>
<style lang="scss" scoped>
.Q-input {
  width: 100%;
  position: relative;
  font-size: 14px;
  display: inline-block;
  // 去除原生input number时候的上下箭头
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
      -webkit-appearance: none !important;
      margin: 0;
  }
  &__inner {
    -webkit-appearance: none;
    background-color: #fff;
    background-image: none;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: none;
    padding: 0 15px;
    transition: border-color 0.2s cubic-bezier(0.645, 045, 0.355, 1);
    width: 100%;

    &:focus {
      outline: none;
      border-color: #409eff;
    }

    &.is-disabled {
      background-color: #f5f7fa;
      border-color: #e4e7ed;
      color: #c0c4cc;
      cursor: not-allowed;
    }
  }
}

.Q-input__suffix {
  .Q-input__inner {
    padding-right: 30px;
    line-height: 1px;
  }

  .Q-input__suffix {
    position: absolute;
    right: 10px;
    height: 100%;
    top: 0;
    line-height: 40px;
    text-align: center;
    color: #c0c4cc;
    transition: all 0.3s;
    z-index: 900;

    i {
      color: #c0c4cc;
      font-size: 14px;
      cursor: pointer;
      transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);

      &.password-icon-active {
        color: blue;
      }
    }
  }
}
</style>
